<template>
  <div class="follower">
    <h3 class="title">我的粉丝</h3>

    <ul class="list-group overflower"  v-if="followers.length" >
  <li class="list-group-item" v-for="(follower,index) in followers">
    <span class="badge" >{{index}}</span>
     <router-link :to="{ name: 'User', params: { id: follower.id } }">
         <span
           class="user-img"
           v-if="follower.get('user_img')"
           :style="{ backgroundImage: 'url(' + follower.get('user_img').get('url') + ')'}">
        </span>
       <span  v-else><i class="fa fa-user-circle-o  fa-2x" aria-hidden="true"></i></span>
       用户昵称：{{ follower.get('username') }}
     </router-link>
  </li>
</ul>
    <span v-else>你暂时没有粉丝</span>

  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {

  name: 'myFollower',

  data () {
    return {
      followers: [],

    };
  },
  computed: mapState(['user']),
  created(){
    this.getFollower();
  },
  methods:{
    getFollower(){
      const q = this.user.followerQuery();
      q.include('follower');
      q.find().then((followers) => {
        this.followers = followers;
        this.$Progress.finish()
      }).catch(console.log);
    }
  }


};
</script>

<style lang="css" scoped>
/*@import '~assets/global.css';*/

.overflower{
  background: #fff;
  overflow: scroll;
  overflow-x: hidden;
  height: 700px;
  margin-top: 20px;

}
  .follower{
    width: 80%;
    text-align: center;
    margin: 0 auto;
    margin-top: 40px;
    text-align: left;
  }
   .user-img{
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 0 1px #55acee;
  }
</style>
